//登录成功后显示用户名
let username = localStorage.getItem("username")
if (username != null) {
  //   console.log(username)
  let usernameStr = username.substring(0, 3)
  let headerLohin = document.querySelector(".headerLohin")
  let login = `
<span>欢迎登录，${usernameStr}</span>
<i>|</i>
<a href="./login.html" id='logout'>注销登录</a>
`
  headerLohin.innerHTML = login
}

//注销
if (username != null) {
  let logout = document.querySelector("#logout")
  logout.addEventListener("click", function () {
    localStorage.removeItem("username")
  })
}
//加鼠标移入移出事件
let lists = document.querySelectorAll(".headerNav_left li")
// console.log(lists)
lists.forEach(function (v) {
  v.onmouseover = function () {
    // console.log(this)
    this.classList.add("listAll")
    // console.log(this.firstElementChild)
    this.firstElementChild.style.color = "#ff6699"
  }
  v.onmouseout = function () {
    this.classList.remove("listAll")
    this.firstElementChild.style.color = "#555"
    lists[2].firstElementChild.style.color = "#ff6699"
    // console.log(lists[0])
  }
})

//品牌brand
let page = 1
let brandUrl = `https://api5.hanfuhui.com/Shop/GetShopListForPublic?count=16&ishot=true`
axios.get(brandUrl, { params: { page } }).then(function (r) {
  // console.log(r)
  let brandArr = r.data.Data
  let brandArrNew = []
  brandArr.forEach(function (v, i) {
    brandArrNew.push(v)
  })
  let str = brandArrNew.splice(14, 1)
  console.log(brandArrNew)
  let brandStr = brandArrNew.map(
    (v) =>
      `
    <li>
      <div class="shop">
          <a href="#"><img src="${v.LogoSrc + "_70x70.jpg"}" alt="" /></a>
          <a class="name" href="#">${v.Name}</a>
          <p><span>商品：</span><i>${v.ProductCount}</i></p>
      </div>
      <div class="commodity"> 
      <dl>
          <img src="${v.Products[0].FaceSrc + "_250x250.jpg"}" alt="" />
          <p>￥${v.Products[0].Price}</p>
          <span><a href="#">${v.Products[0].Name}</a></span>
          </dl>
  
          <dl>
          <img src="${v.Products[1].FaceSrc + "_250x250.jpg"}" alt="" />
          <p>￥${v.Products[1].Price}</p>
          <span><a href="#">${v.Products[1].Name}</a></span>
          </dl>
  
          <dl>
          <img src="${v.Products[2].FaceSrc + "_250x250.jpg"}" alt="" />
          <p>￥${v.Products[2].Price}</p>
          <span><a href="#">${v.Products[2].Name}</a></span>
          </dl>
          <dl>
          <img src="${v.Products[3].FaceSrc + "_250x250.jpg"}" alt="" />
          <p>￥${v.Products[3].Price}</p>
          <span><a href="#">${v.Products[3].Name}</a></span>
          </dl>
         
      </div>
      </li>
    
    `
  )

  document.querySelector(".brand_contentHot").innerHTML = brandStr.join("")
})

//分页加点击事件
let pages = document.querySelectorAll(".page p")
pages.forEach(function (v) {
  v.addEventListener("click", function () {
    console.log(this)

    let page = this.innerHTML
    pages.forEach((v) => v.classList.remove("active"))
    v.classList.add("active")
    let brandUrl = `https://api5.hanfuhui.com/Shop/GetShopListForPublic?count=16&ishot=true`
    axios.get(brandUrl, { params: { page } }).then(function (r) {
      console.log(r)
      let brandArr = r.data.Data
      let brandArrNew = []
      brandArr.forEach(function (v, i) {
        brandArrNew.push(v)
      })
      let str = brandArrNew.splice(14, 1)
      console.log(brandArrNew)
      let brandStr = brandArrNew.map(
        (v) =>
          `
    <li>
      <div class="shop">
          <a href="#"><img src="${v.LogoSrc + "_70x70.jpg"}" alt="" /></a>
          <a class="name" href="#">${v.Name}</a>
          <p><span>商品：</span><i>${v.ProductCount}</i></p>
      </div>
      <div class="commodity"> 
      <dl>
          <img src="${v.Products[0].FaceSrc + "_250x250.jpg"}" alt="" />
          <p>￥${v.Products[0].Price}</p>
          <span><a href="#">${v.Products[0].Name}</a></span>
          </dl>
  
          <dl>
          <img src="${v.Products[1].FaceSrc + "_250x250.jpg"}" alt="" />
          <p>￥${v.Products[1].Price}</p>
          <span><a href="#">${v.Products[1].Name}</a></span>
          </dl>
  
          <dl>
          <img src="${v.Products[2].FaceSrc + "_250x250.jpg"}" alt="" />
          <p>￥${v.Products[2].Price}</p>
          <span><a href="#">${v.Products[2].Name}</a></span>
          </dl>
          <dl>
          <img src="${v.Products[3].FaceSrc + "_250x250.jpg"}" alt="" />
          <p>￥${v.Products[3].Price}</p>
          <span><a href="#">${v.Products[3].Name}</a></span>
          </dl>
         
      </div>
      </li>
    
    `
      )
      document.querySelector(".brand_contentHot").innerHTML = brandStr.join("")
    })
  })
})

//回到顶部
var btn = document.querySelector("#toTop")
window.onscroll = function () {
  if (document.documentElement.scrollTop > 500) {
    btn.style.opacity = "1"
  } else {
    btn.style.opacity = "0"
  }
}
btn.onclick = function () {
  // document.documentElement.scrollTop = 0;//
  document.documentElement.scrollTo({
    top: 0,
    //滚动的行为平滑
    behavior: "smooth",
  })
}
